<template>
  <div class="student-info-container">
    <el-card class="info-card">
      <template #header>
        <span>学生个人信息</span>
      </template>

      <div class="info-avatar">
        <el-avatar :size="100" class="avatar">
          <img :src="user.avatar"/>
        </el-avatar>
        <h2>{{ user.name }}同学</h2>
      </div>

      <el-descriptions :column="1" border class="info-details">
        <el-descriptions-item label="学号">{{ user.studentId }}</el-descriptions-item>
        <el-descriptions-item label="年级">{{ user.grade }}年级</el-descriptions-item>
        <el-descriptions-item label="班级">{{ user.className }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ user.age }}岁</el-descriptions-item>
        <el-descriptions-item label="性别">{{ user.gender === 'male' ? '男' : '女' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ user.phone }}</el-descriptions-item>
        <el-descriptions-item label="入学时间">{{ user.admissionDate }}</el-descriptions-item>
        <el-descriptions-item label="监护人">{{ user.guardian }}</el-descriptions-item>
        <el-descriptions-item label="监护人电话">{{ user.guardianPhone }}</el-descriptions-item>
      </el-descriptions>

      <div class="info-actions">
        <el-button type="primary" @click="handleEdit">编辑信息</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useLoginStore } from '../../../stores/index.js'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 获取用户信息
const loginStore = useLoginStore()
const user = loginStore.user
const router = useRouter()

// 编辑信息
const handleEdit = () => {
  // 跳转到编辑页（可根据需求实现）
  ElMessage.info('编辑功能开发中')
}

// 确保用户信息完整（实际项目中从接口获取）
if (!user.studentId) {
  // 模拟补充用户信息
  user.studentId = 'S2021030201'
  user.grade = '3'
  user.className = '三年级(2)班'
  user.age = 9
  user.gender = 'male'
  user.phone = '13800138101'
  user.admissionDate = '2021-09-01'
  user.guardian = '王大明'
  user.guardianPhone = '13900139001'
}
</script>

<style scoped>
.student-info-container {
  padding: 20px;
}

.info-card {
  max-width: 800px;
  margin: 0 auto;
}

.info-avatar {
  text-align: center;
  margin: 20px 0;
}

.avatar {
  background-color: #FF9F1C;
  font-size: 40px;
  margin-bottom: 15px;
}

.info-details {
  margin: 30px 0;
}

.el-descriptions__label {
  font-weight: 500;
  background-color: #fff8f0;
}

.info-actions {
  text-align: right;
  margin-top: 20px;
}
</style>